<section id="main-content">
  <section class="wrapper">
    <!--state overview end-->
    <div class="row">
      <div class="col-lg-12">
        <div class="alert alert-block alert-warning fade in">
          <button data-dismiss="alert" class="close close-sm" type="button">
            <i class="icon-remove"></i>
          </button>
          <strong>注意事项：</strong><br>
          1、请在发起人员借调时，先与相关人员沟通确认需要借调的具体人员姓名和工号，以及人力费用归属的项目，然后再到系统上登记和确认；<br>
          2、借调一旦生效，具体工作量通过借调人员的OKR子任务周报体现，需要人员使用方的项目经理和人员输出方注重对人员OKR子任务周报的填写和确认。
        </div>

        <section class="panel">
          <div class="panel-body">
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">公司/事业部</label>
              <div class="col-sm-10">
                <select name="compId" ng-model="companys" id="companys" class="form-control" disabled onchange="getUser(this.value)" certus-required>
                  <option value="">请选择</option>
                  <option value="STSJT">赛特斯集团</option>
                  <option value="HFKJ">浩方科技</option>
                  <option value="HFXX">浩方信息</option>
                  <option value="SYB-DL">电力事业部</option>
                  <option value="SYB-RX">融合运维事业部</option>
                </select>
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">归属项目</label>
              <div class="col-sm-10">
                <input type="text" id="proName" name="proName" value="{{proName}}" disabled placeholder="自动检索项目名称" class="form-control">
                <input type="hidden" value="{{proId}}" name="proId" certus-required id="proId" />
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">归属项目下的合同</label>
              <div class="col-sm-10">
                <select class="form-control" disabled name="contractId" id="contractId">
                  <option value="">请选择</option>
                </select>
              </div>
            </div>
          </div>
        </section>

        <section class="panel" id="addloc">
          <header class="panel-heading">
            人员借调
          </header>
          <div class="panel-body">
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">人员借用类别*</label>
              <div class="col-sm-10">
                <select class="form-control" id="dyType">
                  <option value="客服">客服</option>
                  <option value="研发">研发</option>
                  <option value="其他">其他</option>
                </select>
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">调用人员</label>
              <div class="col-sm-10">
                <input type="text" id="dyUserName" value="" placeholder="根据调用人员自动检索部门" name="dyUserName" class="form-control">
                <input type="hidden" value="" certus-required name="dyUserId" id="dyUserId"/>
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">归属部门</label>
              <div class="col-sm-10">
                <select id="deptCode" name="deptCode" ng-model="deptCode" class="form-control" certus-required>
                  <option value="">请选择部门</option>
                  <option ng-repeat="x in depts" value="{{x.departmentCode}}">{{x.departmentName}}</option>
                </select>
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">工作周期*</label>
              <div class="col-sm-10">
                <input id="workStart" type="text" value="" style="width: 48%;" class="form-control" placeholder="开始日期">
                <input id="workEnd" type="text" style="width:48%;position:absolute;left: 50%;bottom: 0px;" value=""
                  class="form-control" placeholder="结束日期">
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">工作任务*</label>
              <div class="col-sm-10">
                <textarea class="form-control" name="comments" id="comments" maxlength="120" placeholder="字符长度限制(120字以内)"></textarea>
              </div>
            </div>
            <div class="form-group customerForm">
              <label class="col-sm-2 control-label">投入百分比*</label>
              <div class="col-sm-10">
                <div class="input-group m-bot15">
                  <input type="text" onkeyup="clearNoNum(this)" onblur="clearNoNum(this)" class="form-control" id="invoiceSl"
                    placeholder="工作投入占比">
                  <span class="input-group-addon">%</span>
                </div>
              </div>
            </div>
            <p class="default-buttons">
              <button class="button-back btn btn-info" onclick="coladd();">取消</button>
              <a href="javascript:void(0);" class="button-next  btn btn-info tj">提交</a>
            </p>
          </div>
        </section>
        <section class="panel">
          <header class="panel-heading add-heading">
            人员借调列表
          </header>
          <div class="panel-body">
            <div id="userlistContainer" class="dlshouwen-grid-container"></div>
          </div>
        </section>
        <section class="panel">
          <header class="panel-heading">
            理由/备注说明
          </header>
          <div class="panel-body">
            <div class="form-group customerForm">
              <textarea class="form-control" maxlength="120" id="loanComments" disabled placeholder="字符长度限制(120字以内)">{{loanComments}}</textarea>
            </div>
            
          </div>
        </section>

        <section class="panel">
            <div class="panel-body">
                <p class="default-buttons">
                    <a href="javascript:void(0);" class="button-next btn btn-info" onclick="window.history.back()">返回</a>
                </p>
            </div>
        </section>
        
        <section>
          <a href="javascript:void(0);" class="second" id="process" onclick="shaper();">
            流程跟踪
          </a>
        </section>
        <!-- 流程跟踪展示效果 -->
        <section class="hdaper">
          <div class="panel">
            <div class="panel-heading add-heading">
              流程跟踪
              <i class="add-icon icon-remove" href="javascript:$.pageslide.close()" onclick="hdaper();"></i>
            </div>
            <div class="panel-body panel-proce">
              <div class="proce-middle" id="nodeContiner"></div>
            </div>
          </div>
          <div class="paper-bg"  onclick="clsbox();"></div>
        </section>
      </div>
    </div>
  </section>
</section>
<script type="text/javascript" src="js/autocomplete/jquery.autocomplete.js"></script>
<script type="text/javascript">
    var stepId = $CertusJsonAjax.getStepInstanceId();
    var processId = $CertusJsonAjax.getProInstanceId();
    $CertusFormAjax.ajax("findSeProList",{},function(response){
        var nhlTeams = [];
        var data = response.data;
        for (var i=0;i<data.length;i++){
            var arr={};
            arr.name=data[i].proName;
            arr.id = data[i].id;
            nhlTeams.push(arr);
        }
        //自动补全
        var nhl = $.map(nhlTeams, function (obj) {
            return {
                value: obj.name,
                data: { category: obj.id }
            };
        });
        // Initialize autocomplete with local lookup:
        $('#proName').devbridgeAutocomplete({
            lookup: nhl,
            minChars: 1,
            onSelect: function (suggestion) {
                $("#proId").val(suggestion.data.category);
                getProContract(suggestion.data.category,"");
            },
            showNoSuggestionNotice: true,
            noSuggestionNotice: 'Sorry, no matching results'
        });

    });

    this.getProContract = function (proId,contractId) {
        $CertusFormAjax.ajax("contractProgresss",{"projId":proId},function (response) {
            var data = response.data;
            $("#contractId").html("");
            $("#contractId").append('<option value="">请选择</option>');
            for (var i=0;i<data.length;i++){
                var ctinfo = data[i].contractInfo;
                $("#contractId").append("<option value='"+ctinfo.contractNo+"'>"+ctinfo.contractNo+"</option>")
            }
            if (contractId!=""){
                $("#contractId").val(contractId);
            }
        });
    };

    this.loadlb = function (paramArr) {
        $("#userlistContainer").empty();
        var userlistColumns = [{
            id: 'deptName',
            title: '借调部门',
            type: 'string',
            width: 150,
            columnClass: 'text-center'
        }, {
            id: 'loanType',
            title: '人员类别',
            type: 'string',
            width: 75,
            columnClass: 'text-center',
        }, {
            id: 'userName',
            title: '人员姓名',
            type: 'string',
            width: 75,
            columnClass: 'text-center'
        }, {
            id: 'workStart',
            title: '开始日期',
            type: 'date',
            columnClass: 'text-center',
            format: 'yyyy-MM-dd',
            otype: 'time_stamp_ms'
        }, {
            id: 'workEnd',
            title: '结束日期',
            type: 'date',
            columnClass: 'text-center',
            format: 'yyyy-MM-dd',
            otype: 'time_stamp_ms'
        },{
            id: 'invoice',
            title: '投入占比(%)',
            type: 'string',
            width: 90,
            columnClass: 'text-center',
        }, {
            id: 'comments',
            title: '工作任务',
            type: 'string',
            columnClass: 'text-center',
        }];
        var userlistOption = {
            lang: 'zh-cn',
            ajaxLoad: false,
            exportFileName: '人员借调列表',
            datas: paramArr,
            columns: userlistColumns,
            gridContainer: 'userlistContainer',
            tools: ''
        };
        var userlistGrid = $.fn.dlshouwen.grid.init(userlistOption);
        userlistGrid.load();
    };

    $CertusFormAjax.ajax('findRhLocs',{"processId":processId},function (response) {
        var tlmBean = response.data.tlmBean;
        $("#addloc").hide();
        $$scope.companys = tlmBean.companyCode;
        $$scope.id = tlmBean.id;
        $$scope.proName = tlmBean.proName;
        getProContract(tlmBean.proId,tlmBean.contractId);
        $$scope.proId = tlmBean.proId;
        $$scope.loanComments = tlmBean.loanComments;

        var personList = response.data.personList;
        loadlb(personList);
    });
</script>
<script src="js/loan/splcNode.js"></script>